<template>
    <div>
        <Header />
        <el-container class="container">
            <el-main class="main">
                <div class="infos">
                    <el-card shadow="always">
                        <el-row :gutter="30">
                            <el-col :span="8"><el-image style="width: 100%" :src="data.cover" fit="contain" /></el-col>
                            <el-col :span="16">
                                <h1 class="course-title">{{data.title}}</h1>
                                <div class="study">
                                    <div class="mt10"><el-text type="danger">¥{{data.price}}</el-text></div>
                                    <div class="mt30 ">
                                        <shopBtn data="去购买" type="product" :id="id"  />
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-tabs class="mt30" v-model="value" @tab-click="handleClick">
                        <el-tab-pane label="产品介绍" name="产品介绍"><p class="data-content" v-html="data.content"></p></el-tab-pane>
                    </el-tabs>
                </div>
            </el-main>
        </el-container>
        <Footer />
    </div>
</template>

<script setup lang="ts">
import Header from '@/components/header.vue'
import Footer from '@/components/footer.vue'
import shopBtn from '@/components/shopBtn.vue'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
import http from '../../util/request';
import func from '../../util/function';
const id: any = ref(useRouter().currentRoute.value.params.id);
const data = ref<any>({})
const value = ref('产品介绍')
const videoData = ref<any>([])

const onGetData = () => {
    http.get('/product/info/'+id.value).then((response:any)=>{
        response.data.data.content = func.onImgStyle( response.data.data.content)
        data.value = response.data.data
        videoData.value = response.data.videos
    })
}

const handleClick = (data: any) => {
    console.log(data)
}

onMounted(()=>{
    onGetData()
})
</script>

<style scoped lang="scss">
.main {
    padding: 0px;
}
.tip {
    padding: 0px 15px;
}

.infos {
    width: 1280px;
    margin: 0px auto;
    padding: 60px 30px;
}

.course-title{height: 120px;}
.study{margin-top: 80px;}
</style>
